<template>
	<a-select v-bind="attrs" :class="['responsive-select', { 'mobile-select': isMobile }]"></a-select>
</template>

<script lang="ts">
import { SelectProps } from 'ant-design-vue';
import { defineComponent, ref, onMounted, onUnmounted } from 'vue';

export default defineComponent({
	setup(_: SelectProps, ctx) {
		const isMobile = ref(false);

		// 检测是否为移动设备
		const checkMobile = () => {
			isMobile.value = window.innerWidth < 768;
		};

		// 监听窗口大小变化
		onMounted(() => {
			checkMobile();
			window.addEventListener('resize', checkMobile);
		});

		onUnmounted(() => {
			window.removeEventListener('resize', checkMobile);
		});

		return {
			attrs: ctx.attrs,
			isMobile
		};
	}
});
</script>

<style lang="scss" scoped>
// 导入响应式工具
@import '@/styles/responsive.scss';

.chart-modal-select {
	::v-deep .ant-select-selector {
		background-color: #3a59a4;
		border-color: #8190b8;

		.ant-select-selection-item {
			color: rgb(255 255 255 / 80%);
			background-color: #4992ff;
			border-color: rgb(255 255 255 / 80%);
		}

		.ant-select-selection-item-remove {
			color: rgb(255 255 255 / 80%);
		}
	}

	&:hover {
		::v-deep .ant-select-selector {
			border-color: #4992ff;
		}
	}

	// 移动端适配样式
	@include respond-to(sm) {
		width: 100% !important;

		::v-deep .ant-select-selector {
			height: 40px;
			padding: 4px 8px;
		}
	}
}

// 移动端特定样式
.mobile-select {
	::v-deep .ant-select-selector {
		padding: 8px 12px;
		border-radius: 8px;
	}
}
</style>

<style lang="scss">
@import '@/styles/responsive.scss';

.chart-select-drop {
	color: rgb(255 255 255 / 60%);
	background-color: #3a59a4;

	.ant-select-item {
		color: rgb(255 255 255 / 60%);
	}

	.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
		background-color: #4992ff;
	}

	.ant-select-item-option-active:not(.ant-select-item-option-disabled) {
		background-color: #6585d2;
	}

	.ant-select-item-option-selected:not(.ant-select-item-option-disabled) .ant-select-item-option-state {
		color: rgb(255 255 255 / 60%);
	}

	// 移动端下拉菜单适配
	@include respond-to(sm) {
		width: 100% !important;
		max-height: 60vh;

		.ant-select-item {
			padding: 10px 12px;
			font-size: 16px; // 移动端更大的字体
		}
	}
}
</style>
